.waxberry-app {
  font-family: HarmonyOS Sans SC;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .app-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    .app-content-data{
      display: flex;
      flex: 1;
      padding: 10px 5px;
      overflow: hidden;
      .app-content-left{
        display: flex;
        flex-direction: column;
        flex: 1;
        background: var(--bg-color11);
        border-radius: 8px;
        overflow: hidden;
        .left-header{
          display: flex;
          align-items: center;
          gap: 50px;
          height: 58px;
          padding: 0 24px;
          border-bottom: 1px solid var(--bd-color6);
          overflow: hidden;
          .label{
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-color1);
            cursor: pointer;
            font-size: 18px;
            font-weight: 500;
            white-space: nowrap;
            //text-overflow: ellipsis;
            overflow: hidden;
            .anticon{
              color: inherit;
              font-size: 10px;
            }
            .model-type{
              display: flex;
              flex-direction: row;
              align-items: center;
              padding: 1px 6px;
              gap: 4px;
              border-radius: 4px;
              color: var(--text-color7);
                    background-color: var(--bg-color39);
              .model-type-name{

                font-size: 12px;
                font-weight: 500;
                line-height: 22px;
              }
            }
          }
          .model{
            display: flex;
            align-items: center;
            color: var(--text-color1);
            background: var(--bg-color17);
            border: 1px solid var(--bd-color5);
            border-radius: 8px;
            padding: 6px 12px;
            .modelSvg{
              width: 22px;
              height: 22px;
              margin-right: 5px;
            }
            .FilterSvg{
              width: 16px;
              height: 16px;
              margin-left: 20px;
            }
          }
        }
        .dialogues{
          margin: 20px;
          flex: 1;
          flex-direction: column;
          overflow-y: auto;
          &::-webkit-scrollbar{
            width: 0;
            height: 0;
          }
          .ai{
            color: var(--text-color1);
            clear: right;
            font-size: 16px;
            .anticon{
              color: inherit;
              font-size: 20px;
            }
          }
          .dialogue{
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 20px;
            .question{
              display: flex;
              flex-direction: column;
              align-items: end;
              gap: 5px;
              color: var(--text-color1);
              .fileOperate{
                display: flex;
                gap: 10px;
                cursor: pointer;
                border-radius: 6px;
                padding: 8px 12px;
                background: var(--bg-color12);
                border: 1px solid var(--bd-color1);
                .fileCount{
                  font-size: 14px;
                  font-weight: 500;
                  svg{
                    vertical-align: bottom;
                  }
                }
              }
              .markdown-content{
                width: fit-content;
                font-size: 16px;
                padding: 12px 14px;
                background: var(--bg-color18);
                border-radius: 8px;
              }
            }
            .answer{
              width: fit-content;
              max-width: 100%;
              display: flex;
              flex-direction: column;
              gap: 10px;
              color: var(--text-color1);
              padding: 12px 14px;
              font-size: 16px;
              background: var(--bg-color19);
              border-radius: 8px;
              overflow: hidden;
              .operate{
                display: flex;
                justify-content: flex-end;
                gap: 10px;
                padding-top: 10px;
                border-top: 1px solid var(--bd-color12);
                .duration{
                  margin-right: auto;
                }
                svg{
                  cursor: pointer;
                  &:hover{
                    background: var(--bg-color13);
                  }
                }
              }
            }
          }
        }
        .run{
          width: fit-content;
          align-self: end;
          cursor: pointer;
          color: #ABDFD0;
          padding: 8px 16px;
          margin-right: 20px;
          background: #03522E;
          border-radius: 4px;
          .anticon{
            color: inherit;
            margin-right: 5px;
          }
        }
        .inputDiv{
          border-radius: 16px;
          border: 1px solid #8B81FF;
          margin: 20px;
          background: var(--bg-color9);
          .inputFileCascader{
            display: block;
            height: 0;
            overflow: hidden;
          }
          .input{
            display: flex;
            gap: 10px;
            padding: 20px;
            flex-direction: column;
            textarea{
              color: var(--text-color2);
              font-size: 16px;
              resize: none;
              border: none;
              background-color: transparent;
              &::placeholder{
                color: var(--text-color2);
              }
              &::-webkit-scrollbar{
                width: 0;
                height: 0;
              }
            }
            textarea:focus{
              box-shadow: none;
            }
            .operate {
              display: flex;
              justify-content: space-between;
              .link {
                color: var(--text-color1);
                display: flex;
                gap: 10px;
                align-items: center;
                svg{
                  cursor: pointer;
                }
              }
              .send{
                cursor: not-allowed;
                color: #5036B1;
              }
              .sendActive{
                cursor: pointer;
                color: #3461E2;
              }
            }
          }
        }
      }
      #drag{
        cursor: col-resize;
        width: 5px;
        height: 100%;
      }
      .app-content-right{
        display: flex;
        flex-direction: column;
        margin-left: 8px;
        background: var(--bg-color11);
        border-radius: 8px;
        overflow: hidden;
        .right-header{
          display: flex;
          height: 58px;
          .menu{
            cursor: pointer;
            color: var(--text-color6);
            font-size: 18px;
            font-weight: 500;
            padding: 15px 24px;
            border-bottom: 1px solid var(--bd-color6);
            svg{
              margin-right: 5px;
            }
          }
          .menu-active{
            color: white;
            border-bottom: none;
            background: #2A2B37;
          }
          .operate{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: end;
            color:var(--text-color1);
            border-bottom: 1px solid var(--bd-color6);
            img{
              cursor: pointer;
              margin-right: 24px;
            }
          }
        }
        .taskDiv{
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 20px;
          padding: 20px;
          overflow: auto;
          &::-webkit-scrollbar{
            width: 0;
            height: 0;
          }
          .ant-timeline-item-tail {
            border-color: var(--bd-color15);
          }
          .ant-timeline-item-head{
            background-color: transparent;
          }
          .emptyTask{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-color1);
          }
        }
        .contentDiv{
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 20px;
          padding: 20px;
          overflow: hidden;
        }
        .codeDiv{
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .codeTitle{
            position: relative;
            font-size: 14px;
            font-weight: 500;
            color: #FFFFFF;
            padding: 12px 24px 12px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #2A2B37;
            border-bottom: 1px solid #32343E;
            .operate{
              display: flex;
              gap: 15px;
              img{
                cursor: pointer;
                vertical-align: middle;
              }
              img:hover{
                background: #3E4058;
              }
            }
            .treeUpload{
              width: 260px;
              display: flex;
              align-items: center;
              gap: 7px;
              position: absolute;
              top: 40px;
              right: 60px;
              padding: 8px;
              border-radius: 4px;
              background: #2A2B37;
              border: 1px solid #32343E;
              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
              z-index: 1;
              .img{
                width: 32px;
                height: 32px;
              }
              .fileData{
                flex: 1;
                display: flex;
                flex-direction: column;
                .fileName{
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  align-items: center;
                  svg{
                    cursor: pointer;
                  }
                }
              }
            }
          }
          .codeBox{
            flex: 1;
            display: flex;
            overflow: hidden;
            .ant-spin-container{
              height: 100%;
            }
            .codeTree{
              width: 240px;
              height: 100%;
              background-color: #2A2B37;
              overflow: auto;
              .ant-tree{
                color: #D3D3E2;
                background-color: #2A2B37;
                overflow: auto;
                .ant-tree-list {
                  .ant-tree-node-content-wrapper{
                    .anticon {
                      color: inherit;
                      margin-right: 5px;
                    }
                  }
                  .ant-tree-node-content-wrapper:hover{
                    color: #D3D3E2;
                    background-color: #424353;
                  }
                  .ant-tree-node-selected{
                    color: #D3D3E2;
                    background-color: #424353;
                  }
                  .anticon-eye{
                    margin-left: 5px;
                  }
                  .label{
                    display: flex;
                  }
                }
              }
            }
            .codeData{
              position: relative;
              flex: 1;
              overflow: hidden;
              #codeDrag{
                position: absolute;
                cursor: col-resize;
                width: 3px;
                height: 100%;
                z-index: 1;
              }
            }
          }
        }
        .logDiv{
          flex: 1;
          display: flex;
          overflow: hidden;
        }
      }
    }
  }
  .waxberry-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    .waxberry-modal-box {
      display: flex;
      flex-direction: column;
      max-height: 100vh;
      border-radius: 8px;
      background: var(--bg-color25);
      overflow: hidden;
      .waxberry-modal-title {
        color: var(--text-color1);
        padding: 15px 24px;
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid var(--bd-color1);
        .anticon {
          cursor: pointer;
          color: var(--text-color1);
          float: right;
          font-size: 14px;
          margin-top: 7px;
        }
      }
      .waxberry-modal-content {
        display: flex;
        overflow: hidden;
        .form{
          width: 468px;
          padding: 20px 24px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          border-right: 1px solid var(--bd-color1);
          overflow: auto;
          .pic{
            display: flex;
            gap: 40px;
            img{
              cursor: pointer;
              border-radius: 4px;
            }
            .icon{
              position: relative;
              display: flex;
              flex-direction: column;
              gap: 10px;
              .label{
                font-size: 16px;
                color: var(--text-color1);
              }
              .size{
                font-size: 12px;
                color: #9E91C2;
              }
              .ai1{
                position: absolute;
                left: 75px;
                bottom: 22px;
              }
              .ai2{
                position: absolute;
                right: -10px;
                bottom: 22px;
              }
            }
          }
          .form-item{
            display: flex;
            flex-direction: column;
            gap: 10px;
            .label{
              color: var(--text-color1);
              font-size: 16px;
            }
            .upload{
              cursor: pointer;
              font-size: 15px;
              color: #FFFFFF;
              padding: 4px 38px;
              background: #5A4BFF;
              border-radius: 4px;
              white-space: nowrap;
            }
            .ant-upload-list-text{
              color: var(--text-color1);
                .anticon{
                    color: var(--text-color1);
                }
              .ant-upload-list-item:hover{
                .ant-upload-list-item-info{
                  background-color: var(--bg-color26);
                }
              }
            }
            .ant-input{
              color: var(--text-color1);
              padding: 9px;
              height: 38px;
              border: none;
              background-color: var(--bg-color26);
              &::placeholder{
                color: var(--text-color9);
              }
            }
            textarea.ant-input {
              width: 100%;
              height: auto;
              resize: none;
              vertical-align: bottom;

            }
            .ant-select{
              height: 38px;
              .ant-select-selector{
                color: var(--text-color1);
                border: none;
                background-color: var(--bg-color26);
                .ant-select-selection-placeholder{
                  color: var(--text-color9);
                }
                .ant-select-selection-wrap{
                  height: 100%;
                }
              }
              .ant-select-arrow{
                color: var(--text-color9);
                svg{
                  font-size: 12px;
                }
              }
            }
            .ant-cascader{
              width: 100%;
            }
            .ant-select-multiple{
              .ant-select-selection-item{
                color: var(--text-color1);
                background: var(--bg-color27);
              }
            }
          }
          .isEdit{
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            color: var(--text-color1);
          }
        }
        .detail{
          width: 800px;
          padding: 20px 24px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          .labelBox{
            display: flex;
            align-items: center;
            gap: 20px;
            color: var(--text-color1);
            .label{
              flex: 1;
              font-size: 16px;
            }
            .ai{
              cursor: pointer;
              width: 20px;
            }
            .upload{
              cursor: pointer;
              svg{
                vertical-align: bottom;
                margin-right: 5px;
              }
            }
          }
          .ant-spin-nested-loading,.ant-spin-container{
            height: 100%;
          }
          .ant-input-wrapper{
            flex: 1;
            textarea{
              height: 100%;
              padding: 10px;
              color: #9E91C2;
              font-size: 16px;
              resize: none;
              background: #252450;
              border: 1px solid var(--bd-color1);
              &::placeholder{
                color: #9E91C2;
              }
            }
          }
        }
      }
      .waxberry-modal-footer{
        text-align: center;
        padding: 15px 20px;
        border-top: 1px solid var(--bd-color1);
        .ok{
          display: inline-block;
          cursor: pointer;
          color: #FFFFFF;
          font-size: 14px;
          font-weight: 500;
          padding: 8px 24px;
          border-radius: 4px;
          background: #4C74FF;
        }
        .close{
          display: inline-block;
          cursor: pointer;
          margin-right: 20px;
          color: var(--text-color1);
          font-size: 14px;
          font-weight: 500;
          padding: 7px 24px;
          border-radius: 4px;
          background: var(--bg-color26);
          border: 1px solid var(--bd-color8);
        }
      }
    }
  }
}

.ant-popover-arrow{
  display: none;
}
.updatePopover{
  .ant-popover-inner{
    background: var(--bg-color25);
    border: 1px solid var(--bd-color1);
    box-shadow: 5px 7px 28px 0px rgba(0, 0, 0, 0.3);
    .ant-popover-inner-content{
      padding: 10px;
      width: 500px;
      .form{
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow: auto;
        .operate{
          display: flex;
          justify-content: space-between;
          font-size: 18px;
          color: var(--text-color1);
          span{
            cursor: pointer;
          }
          .id{
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
        .pic{
          text-align: center;
          img{
            cursor: pointer;
            border-radius: 4px;
          }
          .icon{
            display: inline-block;
            position: relative;
            .ai{
              position: absolute;
              right: -12px;
              bottom: -5px;
            }
          }
        }
        .form-item{
          display: flex;
          flex-direction: column;
          gap: 10px;
          .label{
            color: var(--text-color1);
            font-size: 16px;
          }
          .upload{
            cursor: pointer;
            font-size: 15px;
            color: #FFFFFF;
            padding: 4px 38px;
            background: #5A4BFF;
            border-radius: 4px;
            white-space: nowrap;
          }
          .ant-upload-list-text{
            color: var(--text-color1);
              .anticon{
                  color: var(--text-color1);
              }
            .ant-upload-list-item:hover{
              .ant-upload-list-item-info{
                background-color: var(--bg-color26);
              }
            }
          }
          .ant-input{
            color: var(--text-color1);
            padding: 9px;
            height: 38px;
            border: none;
            background-color: var(--bg-color26);
            &::placeholder{
              color: var(--text-color9);
            }
          }
          textarea.ant-input {
            width: 100%;
            height: auto;
            resize: none;
            vertical-align: bottom;

          }
          .ant-select{
            height: 38px;
            .ant-select-selector{
              color: var(--text-color1);
              border: none;
              background-color: var(--bg-color26);
              .ant-select-selection-placeholder{
                color: var(--text-color9);
              }
              .ant-select-selection-wrap{
                height: 100%;
              }
            }
            .ant-select-arrow{
              color: var(--text-color9);
              svg{
                font-size: 12px;
              }
            }
          }
          .ant-cascader{
            width: 100%;
          }
          .ant-select-multiple{
            .ant-select-selection-item{
              color: var(--text-color1);
              background: var(--bg-color27);
            }
          }
        }
        .isEdit{
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          color: var(--text-color1);
        }
      }
    }
  }
}
